<template>
  <div class="live-container">


    <!-- 左侧面板 - 实时画面 -->
    <div class="left-panel">
      <LiveStream />
    </div>

    <!-- 右侧面板 - 状态面板 -->
    <div class="right-panel">
      <StatusPanel />
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { tiandituConfig } from "@/config";

// 导入组件
import LiveStream from "./components/LiveStream.vue";
import StatusPanel from "./components/StatusPanel.vue";
import ShadowOverlay from "@/components/ShadowOverlay.vue";

const userStore = useUserStore();

// 使用随机域名平衡负载
const randomDomain = computed(() => Math.round(Math.random() * 7));

// 影像底图URL
const satelliteUrl = computed(() => {
  const url = tiandituConfig.serviceUrl.satellite.replace(
    "{s}",
    randomDomain.value
  );
  return `${url}?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituConfig.apiKey}`;
});

// 地图加载完成回调
const onMapLoad = (map) => {
  console.log("天地图加载完成", map);
};

onMounted(() => {
  // 检查认证状态
  userStore.checkAuth();
});
</script>

<style lang="scss" scoped>
.live-container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  /* 左侧面板 */
  .left-panel {
    position: absolute;
    left: 31px;
    top: 147px;
    z-index: 10;
    width: 404px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideRight 0.8s ease-out;
  }

  /* 右侧面板 */
  .right-panel {
    position: absolute;
    right: 31px;
    top: 147px;
    z-index: 10;
    width: 1380px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideLeft 0.8s ease-out;
  }

  
}

</style>